<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>容器环境管理</el-breadcrumb-item>
      <el-breadcrumb-item>容器信息</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <el-input placeholder="请输入tag或姓名或项目名称" class="input-with-select" style="width: 400px">
        <el-button slot="append" icon="el-icon-search"></el-button>
      </el-input>
      <el-table :data="tableData"
                style="width: 100%;
                margin-top: -10px;"
                stripe
      >
        <el-table-column prop="containerEnv" label="容器环境">
        </el-table-column>
        <el-table-column prop="runUser" label="运行人员">
        </el-table-column>
        <el-table-column prop="containerProject" label="项目名称">
        </el-table-column>
        <el-table-column prop="containerTag" label="容器Tag">
        </el-table-column>
        <el-table-column prop="containerName" label="容器名称">
        </el-table-column>
        <el-table-column prop="containerPort" label="容器端口" width="90px;">
        </el-table-column>
        <el-table-column prop="containerNode" label="节点地址">
        </el-table-column>
        <el-table-column prop="containerTime" label="创建时间">
        </el-table-column>
        <el-table-column prop="containerStatus" label="状态" width="70px;">
          <p class="el-icon-success" v-if="containerStatus"></p>
          <p class="el-icon-error" v-else></p>
        </el-table-column>
        <el-table-column prop="rollOver" label="容器续期">
          <template>
            <el-popconfirm
              title="确定为此容器续期吗？">
              <el-button slot="reference">续期</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
        <el-table-column prop="deleteContainer" label="容器删除">
          <template>
            <el-popconfirm
              confirm-button-text='好的'
              cancel-button-text='不用了'
              icon="el-icon-info"
              icon-color="red"
              title="确定删除此容器吗？">
              <el-button slot="reference">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<!--<script>-->
<!--  import axios from 'axios'-->
<!--  export default {-->
<!--    data() {-->
<!--      return {-->
<!--        currentPage: 1,-->
<!--        pageSize: 8,-->
<!--        tableData: []-->
<!--      }-->
<!--    },-->
<!--    mounted() {-->
<!--      this.fetchdata()-->
<!--    },-->
<!--    methods: {-->
<!--      fetchdata() {-->
<!--        axios-->
<!--          .get('http://cmdb.sys.bandubanxie.com/api/environment/')-->
<!--          .then(-->
<!--            response => {-->
<!--              this.tableData = response.data-->
<!--              console.log(response)-->
<!--            },-->
<!--            response => {-->
<!--              console.log('error')-->
<!--              alert('请求失败')-->
<!--            }-->
<!--          )-->
<!--      }-->
<!--    }-->
<!--  }-->
<!--</script>-->

<!--<style>-->
<!--  .box-card {-->
<!--    width: 100%;-->
<!--    margin-top: 10px;-->
<!--  }-->
<!--</style>-->

<!--<script>-->
<!--  import axios from 'axios'-->
<!--  export default {-->

<!--    data() {-->
<!--      const item = {-->
<!--        containerEnv: 'beta',-->
<!--        runUser: '王小虎',-->
<!--        containerProject: 'ysx-agent',-->
<!--        containerTag: 'test1234',-->
<!--        containerName: 'betatest1234ysx-agent',-->
<!--        containerPort: 50932,-->
<!--        containerNode: '172.17.2.147',-->
<!--        containerTime: '19分钟'-->
<!--      }-->
<!--      return {-->
<!--        tableData: [],-->
<!--        containerStatus: true-->
<!--      }-->
<!--    },-->
<!--    mounted () {-->
<!--      this.loadData()-->
<!--    },-->
<!--    methods: {-->
<!--      loadData() {-->
<!--        axios.get('http://127.0.0.1:8000/cmdb/containerInfo').then((response) => {-->
<!--          console.log(response.data)-->
<!--          this.tableData = response.data-->
<!--        })-->
<!--        // const item = {-->
<!--        //   containerEnv: 'beta',-->
<!--        //   runUser: '王小虎',-->
<!--        //   containerProject: 'ysx-agent',-->
<!--        //   containerTag: 'test1234',-->
<!--        //   containerName: 'betatest1234ysx-agent',-->
<!--        //   containerPort: 50932,-->
<!--        //   containerNode: '172.17.2.147',-->
<!--        //   containerTime: '19分钟'-->
<!--        // }-->
<!--        this.tableData = Array(5).fill(item)-->
<!--      }-->


<!--      import axios from 'axios'-->
<!--      export default {-->
<!--        data() {-->
<!--          return {-->
<!--            tableData: []-->
<!--          }-->
<!--        },-->
<!--        mounted() {-->
<!--          this.fetchdata()-->
<!--        },-->
<!--        methods: {-->
<!--          fetchdata() {-->
<!--            axios-->
<!--              .get('http://127.0.0.1:8000/cmdb/containerInfo')-->
<!--              .then(-->
<!--                response => {-->
<!--                  this.tableData = response.data-->
<!--                },-->
<!--                response => {-->
<!--                  console.log('error')-->
<!--                  alert('请求失败')-->
<!--                }-->
<!--              )-->
<!--          }-->
<!--        }-->
<!--      }-->


<template>
  <div id="xterm" class="xterm" />
</template>
<script>
  import { Terminal } from 'xterm'
  import { FitAddon } from 'xterm-addon-fit/out/FitAddon'
  import { AttachAddon } from 'xterm-addon-attach/out/AttachAddon'

  export default {
    name: 'AttachContainer',
    props: {
      socketURI: {
        type: String,
        default: ''
      },
      data () {
        return {
          containerId: 'a951b54567d01'
        }
      },
      mounted () {
        this.initSocket()
      },
      beforeDestroy () {
        this.socket.close()
        this.term.dispose()
      },
      methods: {
        initTerm () {
          const term = new Terminal({
            fontSize: 14,
            cursorBlink: true
          })
          const attachAddon = new AttachAddon(this.socket)
          const fitAddon = new FitAddon()
          term.loadAddon(attachAddon)
          term.loadAddon(fitAddon)
          term.open(document.getElementById('xterm'))
          fitAddon.fit()
          term.focus()
          this.term = term
        },
        initSocket () {
          this.socket = new WebSocket(`wss://172.18.2.223:2375/containers/${this.data().containerId}/attach/ws?logs=1&stream=1&stdin=1&stdout=1&stderr=1 HTTP/1.1`)
          this.socketOnClose()
          this.socketOnOpen()
          this.socketOnError()
        },
        socketOnOpen () {
          this.socket.onopen = () => {
            // 链接成功后
            this.initTerm()
          }
        },
        socketOnClose () {
          this.socket.onclose = () => {
            console.log('close socket')
          }
        },
        socketOnError () {
          this.socket.onerror = () => {
            console.log('socket 链接失败')
          }
        }
      }
    }
  }
</script>


<template>
  <div id="terminal" class="xterm"></div>
</template>

<script>
  import { Terminal } from 'xterm'
  // import { FitAddon } from 'xterm-addon-fit/out/FitAddon'
  import { AttachAddon } from 'xterm-addon-attach/out/AttachAddon'

  export default {
    name: 'AttachContainer',
    data() {
      return {
        containerId: '738d20484fe3',
        nodeIp: '172.18.2.223'
      }
    },
    mounted() {
      const term = new Terminal()
      // const fitAddon = new FitAddon()
      const socket = new WebSocket(`ws://${this.nodeIp}:2375/containers/${this.containerId}/attach/ws?logs=1&stream=1&stdin=1&stdout=1&stderr=1 HTTP/1.1`)
      const attachAddon = new AttachAddon(socket)

      term.loadAddon(attachAddon)
      // term.leoadAddon(fitAddon)
      term.open(document.getElementById('terminal'))
      // fitAddon.fit()
      term.focus()
      socket.onopen = () => { socket.send('\n') } // 当连接建立时向终端发送一个换行符，不这么做的话最初终端是没有内容的，输入换行符可让终端显示当前用户的工作路径

      // window.onresize = function() { // 窗口尺寸变化时，终端尺寸自适应
      //   fitAddon.fit()
      // }

      this.term = term
      this.socket = socket
    },
    beforeDestroy() {
      this.socket.close()
      this.term.dispose()
    }
  }
</script>
<style scoped>
  #terminal{
    height: 500px;
  }
</style>

